<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0; padding:0px; box-sizing: border-box;}
        ul,li{list-style: none;}
        html,body{background-color:#000000;}
        .wrapit{
            white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
        }
        .shopcar_area{width:960px; height:auto; margin:100px auto 0px; font-size:14px;}
        .shopcar_title{width:100%; height:40px; background-color:#f5f5f5;overflow: hidden; border-radius: 2px; padding-left:15px; line-height: 40px;}
        .shopcar_title>li,.shopcar_bottom>li{float:left;}
        .shopcar_title>li:nth-child(2){margin-left:100px;}
        .shopcar_title>li.sc_mo{float:right; width:120px; text-align: center;}
        .shopcar_title>li>img,.shopcar_bottom>li>img{margin-right:10px;cursor:pointer;}
        .groupList_top{height:30px; line-height: 30px;padding-left:15px;}
        .group>li{height: auto;overflow: hidden;border-bottom: 1px solid #e5e5e5;padding-left: 15px;min-height: 110px;background: #f5f5f5;display: flex;align-items: center;}
        .cho{display: flex;align-items: center;}
        .good_pic{margin-left:10px;}
        .good_pic>a,.good_pic>a>img{display:block;width:80px; height:80px;}
        .good_name{width:360px;padding: 10px 0px;display: flex;align-items: center;}
        .good_name>p{width: 150px;line-height: 20px;margin: 0px 20px;}
        .good_name>ul>li{width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
        .txc{width:120px; text-align: center;}
        .shop_num>button{width:20px; height:20px;}
        .shop_num>span{display:inline-block; width:40px; height:20px;}
        .shopcar_bottom{height:50px; line-height: 50px; margin-top:20px; background-color:#f5f5f5; padding-left:15px;}
        .del_all{margin-left:50px;}
        .shopcar_bottom>.fltr{float:right; margin-left:50px;}
        .shopcar_bottom>.fltr>span{color:red;}
        .submi{display:block; width:120px; height:50px; background-color:#189cfb; color:#ffffff; font-size:15px;}
        .disabled{cursor: not-allowed;background: #eaecf1; color:#999999;}
    </style>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="shopcar_area">
            <template>
                <ul class="shopcar_title">
                    <li><img v-on:click="choAll()" v-bind:src="checkedAll?'imgs/check3@2x.png':'imgs/check1@2x.png'" alt="">全选</li>
                    <li>商品</li>
                    <li class="sc_mo">操作</li>
                    <li class="sc_mo">总价</li>
                    <li class="sc_mo">数量</li>
                    <li class="sc_mo">单价</li>
                </ul>
                <ul class="list">
                    <li class="groupList" v-for="(list,ind) in lists">
                        <div class="groupList_top"><img v-on:click="choGroup(ind)" v-bind:src="list.checked?'imgs/check3@2x.png':'imgs/check1@2x.png'" alt=""></div>
                        <ul class="group" v-for="(item,index) in list.CartInfos">
                            <li>
                                <div class="cho"><img v-on:click="choed(ind,index)" v-bind:src="item.checked?'imgs/check3@2x.png':'imgs/check1@2x.png'" alt=""></div>
                                <div class="good_pic"><a href="javascript:void(0)"><img v-bind:src="item.Src" alt=""></a></div>
                                <div class="good_name"><p class="wrapit">{{item.CommodityName}}</p><ul class="slist"><li v-for="Specs in item.Specs.split('|')">{{Specs}}</li></ul></div>
                                <div class="txc"><span>￥{{item.CommodityPrice|cover2Money}}</span></div>
                                <div class="txc shop_num"><button v-on:click="reduce(ind,index)">-</button><span>{{item.CommodityCount}}</span><button v-on:click="add(ind,index)">+</button></div>
                                <div class="txc"><span>￥{{item.CommodityPrice*item.CommodityCount|cover2Money}}</span></div>
                                <div class="txc"><a href="javascript:void(0)" v-on:click="del(ind,index)">删除</a></div>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul class="shopcar_bottom">
                    <li><img v-on:click="choAll()" v-bind:src="checkedAll?'imgs/check3@2x.png':'imgs/check1@2x.png'" alt="">全选</li>
                    <li class="del_all"><a href="javascript:void(0)" v-on:click="del(-1)">删除选择的商品</a></li>
                    <li class="fltr"><button class="submi" v-bind:class="{disabled:!submit}" v-on:click="sub" type="">去结算</button></li>
                    <li class="fltr">总价（不含运费）：<span>￥{{totalPrice|cover2Money}}</span></li>
                    <li class="fltr">已选择<span>{{contNum}}</span>件商品</li>
                </ul>
            </template>
        </div>
    </div>
</body>
</html>
<script>
    Vue.filter("cover2Money",function(price){
        if (isNaN(price)) {
            return price;
        }
        return price.toFixed(2);
    })
    var shopcar = new Vue({
        el:"#app",
        data:{
            totalPrice:0.00,
            checkedAll:false,
            contNum:0,
            submit:false,
            lists:[
                {
                    "CartInfos": [
                        {
                            "goodId":1,
                            "checked":false,
                            "AllPrice": 1.4500,
                            "CommodityCount": 1,
                            "CommodityName": "上海金嗓子",
                            "CommodityPrice": 1.4500,
                            "Specs": "鞋码:39|颜色选择:荧光数码粉|",
                            "Src": "http://112.65.132.238:8099/upload/201703/15/thumb_201703150959292355.png"
                        },
                        {
                            "checked":false,
                            "goodId":2,
                            "AllPrice": 3.0000,
                            "CommodityCount": 1,
                            "CommodityName": "上海金嗓子",
                            "CommodityPrice": 3.0000,
                            "Specs": "鞋码:39|颜色选择:荧光绿|",
                            "Src": "http://112.65.132.238:8099/upload/201703/15/thumb_201703150959292355.png"
                        }
                    ],
                    "checked":false,
                    "SupplierName": "维达集团"
                },
                {
                    "CartInfos": [
                        {
                            "goodId":4,
                            "checked":false,
                            "AllPrice": 0.0100,
                            "CommodityCount": 1,
                            "CommodityName": "8800",
                            "CommodityPrice": 0.0100,
                            "Specs": "规格:500ML|赠品:有赠品|",
                            "Src": "http://112.65.132.238:8099/upload/201702/23/thumb_201702231003481940.jpg"
                        }
                    ],
                    "checked":false,
                    "SupplierName": "英尔健"
                }
            ],

        },
        methods:{
            add:function(ind,index){
                this.lists[ind].CartInfos[index].CommodityCount++;
            },
            reduce:function(ind,index){
                var cc = this.lists[ind].CartInfos[index].CommodityCount
                this.lists[ind].CartInfos[index].CommodityCount--;
                if(cc<2){
                    this.lists[ind].CartInfos[index].CommodityCount = 1;
                }
            },
            choed:function(ind,index){
                this.lists[ind].CartInfos[index].checked = (this.lists[ind].CartInfos[index].checked?false:true);
                var n = 0;
                for(var i=0; i<this.lists[ind].CartInfos.length; i++){
                    if(this.lists[ind].CartInfos[i].checked){
                        n++;
                        if(n == this.lists[ind].CartInfos.length){
                            this.lists[ind].checked = true;
                        }else{
                            this.lists[ind].checked = false;
                        };
                    }else{
                        this.lists[ind].checked = false;
                    };
                    if(i == this.lists[ind].CartInfos.length-1){
                        this.showAll();
                    }
                };
            },
            choGroup:function(ind){
                this.lists[ind].checked?this.lists[ind].checked = false:this.lists[ind].checked = true;
                for(var i=0; i<this.lists[ind].CartInfos.length;i++){
                    if(this.lists[ind].checked){
                        this.lists[ind].CartInfos[i].checked = true;
                    }else{
                        this.lists[ind].CartInfos[i].checked = false;
                    }
                }
                this.showAll();
            },
            choAll:function(){
                this.checkedAll?this.checkedAll = false:this.checkedAll = true;
                for(var i=0; i<this.lists.length; i++){
                    for(var i=0; i<this.lists.length; i++){
                        this.checkedAll?this.lists[i].checked = true:this.lists[i].checked = false;
                        for(var j=0; j<this.lists[i].CartInfos.length; j++){
                            this.checkedAll?this.lists[i].CartInfos[j].checked = true:this.lists[i].CartInfos[j].checked = false;
                        };
                    }
                }
            },
            showAll:function(){
                var z = 0;
                for(var i=0; i<this.lists.length; i++){
                    if(this.lists[i].checked){
                        z++;
                        if(z == this.lists.length){
                            this.checkedAll = true;
                        }else{
                            this.checkedAll = false;
                        };
                    };
                }
            },
            del:function(n,index){
                var messg = confirm("确认删除吗？");
                if(messg){
                    if(n == -1){
                        for(var i=0; i<this.lists.length; i++){
                            for(var j=0; j<this.lists[i].CartInfos.length; j++){
                                if(this.lists[i].CartInfos[j].checked){
                                    de(i,j);
                                    j--;
                                }
                            };
                        }
                        return;
                    }
                    de(n,index);
                }
                function de(ind,a){
                    shopcar.lists[ind].CartInfos.splice(a,1);
                    if(shopcar.lists[ind].CartInfos.length<1){
                        shopcar.lists.splice(ind,1);
                    }
                }
            },
            sub:function(){
                if(!this.submit){
                    alert("请选择之后再去结算！");
                }else{
                    var goodId = new Array();
                    for(var i in this.lists){
                        for(var j in this.lists[i].CartInfos){
                            if(this.lists[i].CartInfos[j].checked){
                                goodId.push(this.lists[i].CartInfos[j].goodId);
                            }
                        }
                    };
                    alert("弹出选中的商品Id--"+goodId.join());
                }
            }
        },
        computed:{
            totalPrices:function(){
                var total = 0,cont=0;
                for(var i in this.lists){
                    for(var j in this.lists[i].CartInfos){
                        if(this.lists[i].CartInfos[j].checked){
                            cont++;
                            total +=  this.lists[i].CartInfos[j].CommodityPrice*this.lists[i].CartInfos[j].CommodityCount;
                        }
                    }
                }
                this.contNum = cont;
                this.totalPrice = total;
                if(cont>0){this.submit = true;}else{this.submit = false;}
                return this.totalPrice;
            }
        },
        watch:{
            totalPrices: function(newValue, oldValue){
                return this.totalPrice = newValue;
            }
        },
    })
</script>